<template>
  <div class="content">
    <div class="middle-part">
      <div>
        <div class="carousel">
          <Carousel></Carousel>
        </div>
        <div class="recommend">
          <Recommend></Recommend>
        </div>
      </div>
      <div class="right">
        <Right></Right>
      </div>
    </div>
  </div>
</template>

<script>
import Carousel from "@/components/Content/Carousel";
import Recommend from "@/components/Content/Recommend";
import Right from "@/components/Content/Right";

export default {
  name: "Content",
  components: {Recommend, Right, Carousel},
  description: {
    // 内容区
  },
}
</script>

<style scoped lang="less">

@import url("@/assets/less/1.less");

.content {
  /*position: relative;
  top: 25px;
  right: 25px;*/
  width: 1000px;
  height: 862px;
  /*background-color: #252D3A;
  border-radius: @theme-radius-icon;*/
  /*border: 1px solid green;*/

  .middle-part {
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    & > div:first-child {
      width: 656px;

      .carousel {
        margin-bottom: @theme-spacing;
      }
    }

    .right {
      /*background-color: #00d463;*/
      width: 300px;
      /*margin-right: @theme-spacing;
      margin-left: @theme-spacing;*/
    }
  }


}
</style>
